<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>FANTHEFUL商城</title>
</head>
<!-- <link rel="shortcut icon" href="/src/favicon.ico"> -->
<link rel="stylesheet" href="/favicon.ico">
<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/lib/swiper/swiper.min.css">
<link rel="stylesheet" href="/css/hf.css">
<link rel="stylesheet" href="/css/home.css">
<link rel="stylesheet" href="/css/base.css">
<link rel="stylesheet" href="/css/home_lunbo.css">

<body>
  <!-- 1.container容器是窗口布局的最基本元素，
    BootStrap推存所有样式都定义在container或container容器之中 -->
  <header>
    <div class="home_header">
      <div class="container">
        <a href="/index.html">
          <div class="iconImage"></div>
        </a>
        <ul>
          <li>
            <span class="header_register"></span>
            <a href="./html/register.html">&nbsp;注册</a>
          </li>
          <li>
            <span class="weibo_register"></span>
            <a href="#" class="">微信 / 微信</a>
            <div>

            </div>
          </li>
          <li>
            <span class="app_down"></span>
            <a href="#" class="">&nbsp;APP下载</a>
          </li>
        </ul>
      </div>
    </div>
  </header>

  <div class="navv">
    <!-- 搜索框 -->
    <div class="top_search_box">
      <div class="tsb_out">
        <ul>
          <!-- 商品分类 -->
          <li class="tsb_product_class theme">
            <span>商品分类</span>
            <div class="tsb_logo_list"></div>
            <script type="text/html" id="3C_nav">
              {{each a item}}
              <li>
                <span class="tsblld_name">{{item.name}}</span>
                <span class="tsblld_img "></span>
                <!-- 这个地方的id 决定了是否显示右边内容 -->
                <div class="tsblld_Y" id="{{item.ts_id}}">
                  <ul>
                    {{each item.typeThemeSonVoList[0] itema}}
                    <li>{{itema.name}}</li>
                    {{/each}}
                    <div class="ts_Y_img"><a href="#"><img src="{{item.imgUrl}}" alt=""></a></div>
                  </ul>
                </div>
              </li>
              {{/each}}
            </script>
            <ul class="tsbll_detail" id="tsbll_detail">

            </ul>
          </li>


          <!-- 主题分类 -->
          <li class="tsb_theme_class theme">
            <span>主题分类</span>
            <div class="tsb_logo_list"></div>
            <script type="text/html" id="game_nav">
              {{each b item}}
              <li>
                <span class="ttc_detail_name">{{item.name}}</span>
                <span class="ttc_detail_img "></span>
                <div class="tsbtc_Z" id="{{item.ts_id}}">
                  <ul>
                    {{each b[0].typeThemeSonVoList[0] item1}}
                    <li>
                      <a href="#"><img src="{{item1.imgUrl}}" alt=""></a>
                    </li>
                    {{/each}}
                  </ul>
                </div>
              </li>
              {{/each}}
            </script>
            <ul class="ttc_detail" id="ttc_detail">
            </ul>
          </li>


          <!-- 中间搜索框 -->
          <li class="tsb_seachbox">
            <input type="text" placeholder="搜索" class="tsb_seachbox_input">
            <span class="aaa tsb_search_btn"></span>
          </li>
          <!-- 登录框 -->
          <li class="theme tsb_login_box">
            <!-- 登录锁 -->
            <div class="tlb_to">
              <span class="bbb"></span>
              <span class="ccc">登录</span>
              <div class="tsblb_box">
                <input type="text" class="tsblb_username" placeholder="账号/邮箱/手机"> <br>
                <input type="text" class="tsblb_password" placeholder="密码"> <br>
                <button class="tsblb_login">登录</button>
                <div class="bsblb_bottom">
                  <span><a href="/html/register.html">免费注册</a></span>
                  <span><a href="#">忘记密码？</a></span>
                </div>
              </div>
            </div>
            <!--登录后-->
            <div class="tlb_new">
              <span class="tlbn_username"></span>
              <span class="tlbn_img"></span>
              <div class="tlbn_outbox">
                <div class="tlbn_S"></div>
                <ul>
                  <li>
                    <span class="tlbno_center tlbno_center1">个人中心</span>
                    <span class="tlbno_img"></span>
                  </li>
                  <li>
                    <span class="tlbno_out tlbno_center1">退出</span>
                    <span class="tlbno_img"></span>
                  </li>
                </ul>
              </div>
            </div>
          </li>



          <!-- 订单 -->
          <li class="theme tsb_order_list">
            <div>
              <span>订单（</span>
              <span>0</span>
              <span>）</span>
            </div>
          </li>
          <!-- 购物车 -->
          <li class="theme tsb_shopping_cart" onclick="window.location.href='/html/shopping_cart.html'">
            <div>
              <span class="tsc_eee">0</span>
              <span class="ddd">购物车</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 下面的链接 -->
    <div class="link_container">
      <div class="lc_w">
        <ul style="display: flex;">
          <li>
            <span><a href="/html/new_product.html?id=0">新品上市</a></span>
          </li>
          <li>
            <span><a href="/html/new_product.html?id=1">热销精选</a></span>
          </li>
          <li>
            <span><a href="/html/new_product.html?id=2">限量收藏</a></span>
          </li>
          <li>
            <span><a href="/html/new_product.html?id=3">抢先预定</a></span>
          </li>
          <li>
            <span><a href="/html/new_product.html?id=4">限量推春</a></span>
          </li>
          <li>
            <span><a href="/html/new_product.html?id=5">特价折扣</a></span>
          </li>
          <li>
            <span><a href="/html/new_product.html?id=6" style="color: red;">FANTHFUL</a></span>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- nav图片 -->
  <!-- http://www.fanthful.com/productTypeSearch/?themeTwo=284 -->
  <div class="container">
    <div class="c_link_img">
      <ul id="pro_imgs">
        <script type="text/html" id="pi_imgs">
          {{each proImg item}}
          <li>
            <a href="/html/new_product.html?themeTwo={{item.id}}"><img src="{{item.imgUrl}}" alt=""></a>
          </li>
          {{/each}}
        </script>
      </ul>
    </div>
  </div>

  <!-- 首页轮播 -->
  <div class="pic">
    <!-- Swiper -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image:url(./img/01.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(./img/02.jpg)"></div>
        <div class="swiper-slide" style="background-image:url(./img/03.jpg)"></div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination swiper-pagination-white"></div>
      <!-- Add Arrows -->
      <div class="swiper-button-next swiper-button-white " id="aaaa"></div>
      <div class="swiper-button-prev swiper-button-white " id="aaaa"></div>
    </div>
  </div>
  <!-- 首页轮播结束 -->

  <!-- 排序 -->
  <div class="sort_list">
    <span class="sl_in sl_B"
      onclick="$('.sort_list .sl_list').slideToggle(); $('.sort_list .sl_B').toggleClass('sl_out'); $('.sort_list .sl_B').toggleClass('sl_in')">排序</span>
    <div class="sl_list">
      <ul>
        <li>按最新上架时间</li>
        <li>按浏览量</li>
        <li>按购买数量</li>
        <li>按价格从低到高</li>
        <li>按价格从高到低</li>
      </ul>
    </div>
  </div>
  <!-- 排序结束 -->


  <!-- 商品部分 -->
  <div class="container">
    <!-- 总的列表 -->
    <div class="home_pro_list">
      <ul id="prouctsContent">

        <script type="text/html" id="productLists">
          <!-- //循环一个prodlist 它的每一项是 item -->
          {{each prodlist item}}
        <li style="cursor: pointer;">
          <div class="W">

            <div class="hpl_box">
              <a class='ssd' href="/html/product_detail.html?productId={{item.id}}">
                <div class="hplb_img">
                  {{each item.imageStrList item1}}
                  <div class="hplb_imgs"><img src="{{item1}}" alt=""></div>
                  {{/each}}
                </div>

                <p class="text1">{{item.name}}...</p>
                <p class="text2">{{item.englishName}}</p>

                <div class="text3">
                  <span>￥</span>
                  <p class="Price">{{item.price}}</p>
                </div>

                <div class="text4">
                  {{if item.activePrice}}<del>￥</del>
                  <del class="Oldrice">{{item.activePrice}}</del>{{/if}}
                </div>
            </div>
            </a>
            <div class="hplb_left"></div>
            <div class="hplb_right"></div>
          </div>

        </li>
        {{/each}}
        </script>
      </ul>
    </div>
  </div>
  <!-- 商品部分结束 -->


  <footer>
    <div class="footer">
      <div class="container-fluid">
        <div class="footer_top">
          <div class="dist">
            <ul>
              <li class="dist-big">购物指南</li>
              <li><a href="#">购物流程</a></li>
              <li><a href="#">支付方式</a></li>
              <li><a href="#">常见问题</a></li>
            </ul>
          </div>
          <div class="dist">
            <ul>
              <li class="dist-big">配送说明</li>
              <li><a href="#">配送区域与时效</a></li>
              <li><a href="#">配送运费</a></li>
              <li><a href="#">验货签收</a></li>
            </ul>
          </div>
          <div class="dist">
            <ul>
              <li class="dist-big">售后服务</li>
              <li><a href="#">售后政策</a></li>
              <li><a href="#">退换流程</a></li>
              <li><a href="#">联系客服</a></li>
            </ul>
          </div>
          <div class="dist">
            <ul>
              <li class="dist-big">Fanthful</li>
              <li><a href="#">FAN卡介绍</a></li>
              <li><a href="#">&nbsp;</a></li>
              <li><a href="#">&nbsp;</a></li>
            </ul>
          </div>
          <div class="dist">
            <ul>
              <li class="dist-big">联系我们</li>
              <li><a href="#">关于Fanthful</a></li>
              <li><a href="#">业务合作</a></li>
              <li><a href="#">&nbsp;</a></li>
            </ul>
          </div>
        </div>
        <div class="footer_bottom">
          <p class="footrt_service">
            <a href="#">服务条款</a>
            &nbsp;|&nbsp;
            <a href="#">隐私政策</a>
          </p>
          <div class="gongan">
            <a href="#"><img src="./img/gongan.png" alt="">川公网安备&nbsp;44011302000920号</a>
          </div>
          <div class="beiannum">
            <a href="#">粤ICP备17083322号-1</a>
            Copyright @ 2018 FANTHFUL&nbsp;|&nbsp;
            <a href="#">出版物经营许可证新出发粤穗零字第埔043号</a>
          </div>
          <p class="company">广聚博汇（广州）文化传播有限公司版权所有</p>
        </div>
      </div>
    </div>
  </footer>
</body>
<script src="/lib/swiper/swiper.min.js"></script>
<script src="/lib/requirejs/require.js" data-main="/js/index.js"></script>

</html>